<template>
    <div>
        <nav-title></nav-title>
        <div class="body_bg">
            <el-form :model="queryForm" :inline="true" class="demo-form-inline">
                <el-form-item label="所属系统">
                    <sys-select v-model="queryForm.sysCode" @change="getData()"/>
                </el-form-item>
                <el-form-item class="site_name"  label="账号">
                    <el-input v-model="queryForm.userCode" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item class="site_name"  label="姓名">
                    <el-input v-model="queryForm.userName" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item class="site_name"  label="手机号">
                    <el-input v-model="queryForm.phone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getData">查询</el-button>
                    <el-button type="primary" @click="handleNew">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="easyPage.records" ref="singleTable" border highlight-current-row style="width: 100%">
                <el-table-column type="index" class-name="index-table" width="60"/>
                <el-table-column prop="userCode" label="用户账号"/>
                <el-table-column prop="userName" label="姓名"/>
                <el-table-column prop="phone" label="电话号码"/>
                <el-table-column prop="idNumber" label="身份证号码"/>
                <el-table-column prop="email" label="邮箱"/>
                <el-table-column prop="status" label="状态" width="60">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.isValid" @change="handleStatus(scope.row)" active-color="#13ce66"
                                   inactive-color="#ff4949"/>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200" header-align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="text" type="small" @click="handleDelete(scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click="handleReset(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <common-page v-model="easyPage" @change="getData" @current-change="getData"/>
        </div>
        <user-dialog :pk="dlg.pk" v-model="dlg.dialogVisible" :disabled="dlg.disabled" @close="getData"/>
    </div>
</template>
<script>
  import CommonPage from '../../../components/common/CommonPage.vue'
  import UserDialog from './UserDialog.vue'
  import NavTitle from '../../../components/common/NavTitle'
  import SysSelect from '../../../components/sys/SysSelect'

  export default {
    components: {
      UserDialog,
      CommonPage,
      NavTitle,
      SysSelect
    },
    data () {
      return {
        dlg: {
          dialogVisible: false,
          disabled: false,
          pk: '',
        },
        easyPage: {
          current: 1,
          size: 10,
        },
        queryForm: {
            sysCode :'sec'
        }
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: this.easyPage.current,
          size: this.easyPage.size
        })
        self.$axios
          .post('userAction/findEasyPage', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
          })
      },
      handleNew () {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: '',
        }
      },
      handleEdit (row) {
        let self = this
        self.dlg = {
          dialogVisible: true,
          disabled: false,
          pk: row.userId,
        }
      },
      handleView (row) {
        let self = this
          console.log("row:",row)
        self.dlg = {
          dialogVisible: true,
          disabled: true,
          pk: row.userId,
        }
      },
      handleStatus (row) {
        let self = this
        self.$axios
            .post('userAction/updateStatus', {
                userId: row.userId,
                isValid: row.isValid
            })
            .then(function (res) {
                if (res.data.result) {
                    self.$message({
                        message: '操作成功',
                        type: 'success'
                    })
                } else {
                    row.status = !row.status
                    self.$message.error(res.data.msg)
                }
            })
      },
      handleDelete (row) {
        let self = this
        self.$confirm('你确定要删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            self.$axios
                .post('userAction/deleteUser', {
                    id: row.userId
                })
                .then(function (res) {
                    if (res.data.result) {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        self.getData()
                    } else {
                        self.$message.error(res.data.msg)
                    }
                })
        })
      },
      handleReset (row) {
        let self = this
        self.$confirm('你确定要重置密码?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            self.$axios
                .post('userAction/resetPassword', {
                    id: row.userId
                })
                .then(function (res) {
                    if (res.data.result) {
                        self.$message({
                            message: '重置成功',
                            type: 'success'
                        })
                        self.getData()
                    } else {
                        self.$message.error(res.data.msg)
                    }
                })
        })
      }
    }
  }
</script>
<style>
    .site_name .el-form-item__content{
        width: 240px;
    }
    .area_code .el-cascader{
        width:384px;
    }
</style>